<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/main.css">
    <script type="text/javascript"  src="js/vendor/modernizr-2.6.2.min.js"></script>
    <script type="text/javascript"  src="js/vendor/jquery-1.9.1.min.js"></script>
    <script type="text/javascript"  src="js/vendor/kinetic-v4.5.5.min.js"></script>
    <script type="text/javascript"  src="js/jquery.mousewheel.js"></script>
    <script type="text/javascript"  src="js/vendor/jquery-ui.js"></script>
    <script type="text/javascript"  src="js/plugins.js"></script>
    <script type="text/javascript"  src="js/main.js"></script>
  </head>
  <body>
    <!--[if lt IE 7]>
        <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
    <![endif]-->
    <div>

      <script type="text/javascript" >
        setInterval(function(){
          $('#memory_status').html(canvas.usedMemory());
        }, 500);
      </script>
    </div>
    <!-- Add your site or application content here -->
    <div class="working_space" style="margin-top: 10px;">
      <div id="canvas_space" class="canvas_space">
      </div>
      <p style="text-align: center; margin: 5px">
        <input type="button" onclick="canvas.resetWorkingSpace()" value="RESET"/>
        <input type="button" onclick="canvas.centerTable();" value="==="/>
        <input type="range" value="0" name="points" min="-35" max="150" onchange="canvas.zoomTo(this.value);"/>
        <input type="button" onclick="canvas.addRowAbove(2)" value="row+^"/>
        <input type="button" onclick="canvas.addRowBelow(3)" value="row+v"/>
        <input type="button" onclick="canvas.addColLeft(2)" value="col+<"/>
        <input type="button" onclick="canvas.addColRight(3)" value="col+>"/>
        <input type="button" onclick="canvas.removeRowAbove(2)" value="row-^"/>
        <input type="button" onclick="canvas.removeRowBelow(1)" value="row-v"/>
        <input type="button" onclick="canvas.removeColLeft(2)" value="col-<"/>
        <input type="button" onclick="canvas.removeColRight(1)" value="col->"/>
        <input type="button" onclick="canvas.undo()" value="<< Ctrl + Z"/>
        <input type="button" onclick="canvas.redo()" value="Ctrl + Y >>"/>
      </p>
      <p style="text-align: center; margin: 0">Memory: <span id="memory_status"></span></p>
      <div id="material_space" class="material_space">
      </div>
    </div>
    <input type="button" value="Import" onclick="import_me()"/><input type="button" value="Insert" onclick="canvas.addMaterial(imported_obj.layer.toDataURL());"/><br/>
    <textarea rows="2" cols="100" id="canvas_text"></textarea>
    <div id="testcanvas">

    </div>

    <script type="text/javascript" >
      var testcanvas = new Kinetic.Stage({
        container: 'testcanvas',
        width: 210,
        height: 210
      });
      var testlayer = new Kinetic.Layer();
      function import_canvas(shapes_html_code, callback) {
        //Every tile is saved as a html file (the file that has been exported from AI)
        var func = shapes_html_code.match(/function draw\(ctx\) \{[\s\S]*\}/);
        var shapes = func[0].match(/ctx\.beginPath\(\);[\s\S]*?ctx\.fill\(\);/g);
        var canvas_tag = shapes_html_code.match(/<canvas[\s\S]*?<\/canvas>/)[0];
        var stage_width = Number(canvas_tag.match(/width=\"[\s\S]*?\"/)[0].replace('width="',"").replace('"',''));
        var stage_height = Number(canvas_tag.match(/height=\"[\s\S]*?\"/)[0].replace('height="',"").replace('"',''));
        var size = {width: stage_width, height: stage_height};
        var new_shapes = Array();
        var new_layer = new Kinetic.Layer();
        for (i = 0; i < shapes.length; ++i) {
          new_shapes.push();
          eval('new_shapes['+i+'] = new Kinetic.Shape({' +
            'drawFunc: function(canvas) {' +
            'var ctx = canvas.getContext();' +
            shapes[i] +
            'canvas.fillStroke(this);' +
            '},' +
            '});' +
            'new_layer.add(new_shapes['+i+']);');
        }
        var tile_object = {layer: new_layer, shapes: new_shapes, size: size};
        callback(tile_object);
      }
      var imported_obj;
      function import_me() {
        import_canvas($('#canvas_text').val(), function(tile_object) {
          //layertile_object = layer, shapes, size;
          layer = tile_object.layer;
          shapes = tile_object.shapes;
          size = tile_object.size;
          //Do anything you want here
          for (i = 0; i < shapes.length; ++i) {
            shapes[i].on('mousedown', function() {
              var fill = this.getFill() == 'yellow' ? '#00D2FF' : 'yellow';
              this.setFill(fill);
              layer.draw();
            });
          }
          var new_c = new Kinetic.Stage({
            container: 'testcanvas',
            width: size.width,
            height: size.height
          });
          new_c.add(layer);
          imported_obj = {layer: layer, size: size};
        });
      }

      $(document).ready(function() {
        canvas = $('#canvas_space').gridTile({
          material_space: '#material_space',
          width: 800,
          height: 500,
          cols: 13,
          rows: 13,
          tileWidth: 60,
          tileHeight: 60,
          clipboardMemoryLimit: 1000
        });
      });

    </script>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID.
    <script>
        var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src='//www.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
    </script> -->
  </body>
</html>
